﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="position-change">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <span>您正在做的业务是：</span>
                <span>
                    人力资源 > 客户化设置 > 人力资源档案管理设置 > 职称设置
                </span>
            </div>

            <!-- 统计信息 -->
            <div class="statistics">
                当前可变更是职位发布总数：{{ rows }} 例
            </div>
            <div>
                <el-button type="link" v-on:click="insert">添加</el-button>
             </div> 
            <!-- 职位列表 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="attribute_kind" label="属性种类"></el-table-column>
                <el-table-column prop="attribute_name" label="属性名称"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        @* <el-button type="link" v-on:click="Update(scope.row)">修改</el-button> *@
                        <el-button type="link" v-on:click="Delete(scope.row.pbc_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-pagination v-model:current-page="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[2, 4, 6, 8, 10]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="rows"
                           v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>

    <script type="text/javascript">
         // 从Vue导入所有必要的API
        const { createApp, ref, reactive, computed, onMounted } = Vue;
        // 从Element Plus导入Message组件
        const { ElMessage } = ElementPlus;
        const app = createApp({
            setup() {
                // 响应式数据
                const tableData = ref([]);
                const rows = ref(0);
                const currentPage = ref(1);
                const pageSize = ref(8);

                // 模拟数据（测试用）
                const rowData = [
                    {
                        mak_id:'',
                        major_kind_id: '',
                        major_kind_name:'' ,
                        major_id: '',
                        major_name:'',
                        test_amount:''
                    }
                ];

               function fill() {
                    axios.get('/config/config_public_charfy', {
                        params: {
                            currentPage: currentPage.value,
                            pageSize: pageSize.value
                        }
                    }).then(res => {
                        tableData.value = res.data.list;
                        rows.value = res.data.rows;
                    }).catch(err => {
                        console.error(err);
                    });
                }
                fill();
                // 处理分页大小变化
                function handleSizeChange(size) {
                    pageSize.value = size;
                    fill();
                }

                // 处理页码变化
                function handleCurrentChange(cpage) {
                    currentPage.value = cpage;
                    fill();
                }
                function insert(){
                     window.location.href='@Url.Action("public_char_add", "config")';
                }

            const Update = (rowData) => {
            // 对rowData中的特殊字符进行转义处理（避免URL编码异常）
            const safeData = JSON.parse(JSON.stringify(rowData).replace(/[<>]/g, ''));

            // 序列化并编码数据（使用encodeURIComponent处理URL安全）
            const encodedData = encodeURIComponent(JSON.stringify(safeData));

            // 生成带参数的URL（使用Razor获取正确路由）
            const baseUrl = '@Url.Action("thirdUpdate", "config")';
            const url = `${baseUrl}?data=${encodedData}`;

            // 跳转至修改页面
            window.location.href = url;
        };

                // 删除按钮事件
                const Delete = (pbc_id) => {
                    console.log("删除职位ID:", pbc_id);
                     if (confirm('确定要删除吗？')) {
                        axios.delete(`/config/config_public_charDelete/${pbc_id}`)
                            .then(() => {
                                ElMessage.success("删除成功");
                                fill(); // 删除成功后重新加载数据
                            })
                            .catch((error) => {
                                console.error("删除资源时出错", error);
                            });
                    }
                };

                return {
                    tableData,
                    rows,
                    currentPage,
                    pageSize,
                    handleSizeChange,
                    handleCurrentChange,
                    Update,
                    Delete,
                    insert,
                    rowData
                };
            }
        });

        app.use(ElementPlus, {
             locale: ElementPlusLocaleZhCn
         });

         // 正确挂载应用
         app.mount('#app');
    </script>
</body>
</html>
